@page "/maps/maps-with-pie"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.Charts

@inherits SampleBaseComponent;

<SampleDescription>
    <p>  This sample visualizes the placing of pie charts on the maps. Pie chart is rendered with the age group details of top 6 largest countries.</p>
</SampleDescription>
<ActionDescription>
   <p> In this example, you can see how to render the pie chart as marker in map. Any custom HTML elements can be used as a marker.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps>
        <MapsZoomSettings Enable="false" />
        <MapsTitleSettings Text="Top 6 largest countries age group details">
            <MapsTitleTextStyle Size="16px" />
        </MapsTitleSettings>
        <MapsLegendSettings Visible="true" Position="Syncfusion.Blazor.Maps.LegendPosition.Bottom" />
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/world-map.json"}' TValue="string">
                <MapsShapeSettings Fill="#E5E5E5">
                    <MapsShapeColorMappings>
                        <MapsShapeColorMapping StartRange="1" EndRange="14" Color="@shapeColorOne" Label="0-14 year" />
                        <MapsShapeColorMapping StartRange="15" EndRange="24" Color="@shapeColorTwo" Label="15-24 year" />
                        <MapsShapeColorMapping StartRange="25" EndRange="54" Color="@shapeColorThree" Label=" 25-54 year" />
                        <MapsShapeColorMapping StartRange="55" EndRange="64" Color="@shapeColorFour" Label="55-64 year" />
                    </MapsShapeColorMappings>
                </MapsShapeSettings>
                <MapsMarkerSettings>
                    <MapsMarker Visible="true" DataSource="@PieOne" TValue="PieDataSource">
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:0px;margin-left:0px;border-style: hidden;">
                                    <SfAccumulationChart Background="transparent" Height="70px" Width="70px">
                                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
                                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
                                        <AccumulationChartSeriesCollection>
                                            <AccumulationChartSeries Explode="true" ExplodeIndex="0" ExplodeOffset="20%" Name="name" DataSource="@PieData[0]" XName="X" YName="Y" Palettes='new string[] { "#634D6F", "#B34D6D", "#557C5C", "#5E55E2", "#7C744D" }'>
                                                <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
                                            </AccumulationChartSeries>
                                        </AccumulationChartSeriesCollection>
                                    </SfAccumulationChart>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PieTwo" TValue="PieDataSource">
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:0px;margin-left:0px;border-style: hidden;">
                                    <SfAccumulationChart Background="transparent" Height="70px" Width="70px">
                                        <AccumulationChartBorder Width="0"></AccumulationChartBorder>
                                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
                                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
                                        <AccumulationChartSeriesCollection>
                                            <AccumulationChartSeries Explode="true" ExplodeIndex="0" ExplodeOffset="20%" Name="name" DataSource="@PieData[1]" XName="X" YName="Y" Palettes='new string[] { "#634D6F", "#B34D6D", "#557C5C", "#5E55E2", "#7C744D" }'>
                                                <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
                                            </AccumulationChartSeries>
                                        </AccumulationChartSeriesCollection>
                                    </SfAccumulationChart>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PieThree" TValue="PieDataSource">
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:0px;margin-left:0px;border-style: hidden;">
                                    <SfAccumulationChart Background="transparent" Height="70px" Width="70px">
                                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
                                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
                                        <AccumulationChartSeriesCollection>
                                            <AccumulationChartSeries Explode="true" ExplodeIndex="0" ExplodeOffset="20%" Name="name" DataSource="@PieData[2]" XName="X" YName="Y" Palettes='new string[] { "#634D6F", "#B34D6D", "#557C5C", "#5E55E2", "#7C744D" }'>
                                                <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
                                            </AccumulationChartSeries>
                                        </AccumulationChartSeriesCollection>
                                    </SfAccumulationChart>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PieFour" TValue="PieDataSource">
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:0px;margin-left:0px;border-style: hidden;">
                                    <SfAccumulationChart Background="transparent" Height="70px" Width="70px">
                                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
                                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
                                        <AccumulationChartSeriesCollection>
                                            <AccumulationChartSeries Explode="true" ExplodeIndex="0" ExplodeOffset="20%" Name="name" DataSource="@PieData[3]" XName="X" YName="Y" Palettes='new string[] { "#634D6F", "#B34D6D", "#557C5C", "#5E55E2", "#7C744D" }'>
                                                <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
                                            </AccumulationChartSeries>
                                        </AccumulationChartSeriesCollection>
                                    </SfAccumulationChart>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PieFive" TValue="PieDataSource">
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:0px;margin-left:0px;">
                                    <SfAccumulationChart Background="transparent" Height="70px" Width="70px">
                                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
                                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
                                        <AccumulationChartSeriesCollection>
                                            <AccumulationChartSeries Explode="true" ExplodeIndex="0" ExplodeOffset="20%" Name="name" DataSource="@PieData[4]" XName="X" YName="Y" Palettes='new string[] { "#634D6F", "#B34D6D", "#557C5C", "#5E55E2", "#7C744D" }'>
                                                <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
                                            </AccumulationChartSeries>
                                        </AccumulationChartSeriesCollection>
                                    </SfAccumulationChart>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                    <MapsMarker Visible="true" DataSource="@PieSix" TValue="PieDataSource">
                        <MarkerTemplate>
                            @{
                                <div style="margin-top:0px;margin-left:0px;">
                                    <SfAccumulationChart Background="transparent" Height="70px" Width="70px">
                                        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
                                        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
                                        <AccumulationChartSeriesCollection>
                                            <AccumulationChartSeries Explode="true" ExplodeIndex="0" ExplodeOffset="20%" Name="name" DataSource="@PieData[5]" XName="X" YName="Y" Palettes='new string[] { "#634D6F", "#B34D6D", "#557C5C", "#5E55E2", "#7C744D" }'>
                                                <AccumulationDataLabelSettings Visible="false"></AccumulationDataLabelSettings>
                                            </AccumulationChartSeries>
                                        </AccumulationChartSeriesCollection>
                                    </SfAccumulationChart>
                                </div>
                            }
                        </MarkerTemplate>
                    </MapsMarker>
                </MapsMarkerSettings>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>
@code {
    public string[] shapeColorOne = { "#634D6F" };
    public string[] shapeColorTwo = { "#B34D6D" };
    public string[] shapeColorThree = { "#557C5C" };
    public string[] shapeColorFour = { "#5E55E2" };
    public class Pie
    {
        public string X { get; set; }
        public double Y { get; set; }
    }
    public class PieDataSource
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }
    public List<List<Pie>> PieData = new List<List<Pie>> {
        new List<Pie>{ new Pie { X="0-14 years", Y=16 }, new Pie { X="15-24 years", Y=11.5 }, new Pie { X="25-54 years", Y=45.9 }, new Pie { X="55-64 years", Y=13.5 } },
        new List<Pie>{ new Pie { X="0-14 years", Y=15.5 }, new Pie { X="15-24 years", Y=12.9 }, new Pie { X="25-54 years", Y=41.4 }, new Pie { X="55-64 years", Y=13.3 } },
        new List<Pie>{ new Pie { X="0-14 years", Y=20 }, new Pie { X="15-24 years", Y=13.7 }, new Pie { X="25-54 years", Y=40.2 }, new Pie { X="55-64 years", Y=12.3 } },
        new List<Pie>{ new Pie { X="0-14 years", Y=17.2 }, new Pie { X="15-24 years", Y=15.4 }, new Pie { X="25-54 years", Y=46.9 }, new Pie { X="55-64 years", Y=11.3 } },
        new List<Pie>{ new Pie { X="0-14 years", Y=24.2 }, new Pie { X="15-24 years", Y=16.7 }, new Pie { X="25-54 years", Y=43.6 }, new Pie { X="55-64 years", Y=8.2 } },
        new List<Pie>{ new Pie { X="0-14 years", Y=18.1 }, new Pie { X="15-24 years", Y=13.4 },new Pie { X="25-54 years", Y=42 }, new Pie { X="55-64 years", Y=11.8 } }
    };
    public List<PieDataSource> PieOne = new List<PieDataSource> {
        new PieDataSource { Latitude=61.938950426660604, Longitude=97.03125 }
    };
    public List<PieDataSource> PieTwo = new List<PieDataSource> {
        new PieDataSource { Latitude=57.70414723434193, Longitude=-114.08203125 }
    };
    public List<PieDataSource> PieThree = new List<PieDataSource> {
        new PieDataSource { Latitude=39.90973623453719, Longitude=-103.0078125 }
    };
    public List<PieDataSource> PieFour = new List<PieDataSource> {
        new PieDataSource { Latitude=35.746512259918504, Longitude=102.216796875 }
    };
    public List<PieDataSource> PieFive = new List<PieDataSource> {
        new PieDataSource { Latitude=-8.667918002363107, Longitude=-52.55859375 }
    };
    public List<PieDataSource> PieSix = new List<PieDataSource> {
        new PieDataSource { Latitude=-23.725011735951796 , Longitude=132.978515625 }
    };
}